<template>
  <a-layout id="components-layout-demo-custom-trigger" :style="{ overflow: 'auto', height: '100vh', left: 0 }">
    <a-layout-sider style="background: #f0f2f5"/>
    <a-layout-sider style="width: 20%;min-width: 20%; background: #f0f2f5">
      <div class="user-info">
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="16">
            <div class="ant-upload-preview">
              <img :src="this.homeData.userInfo.iconPath" width="100%" height="100%" style="border-radius: 100px;"/>
            </div>
          </a-col>
          <a-col :span="4"></a-col>
        </a-row>
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="16">
            <label>
              <span class="field">Name: </span>
              <span>{{ homeData.userInfo.nickName }}</span>
            </label>
          </a-col>
          <a-col :span="4"></a-col>
        </a-row>
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="16">
            <label>
              <span class="field">Email: </span>
              <span>{{ homeData.userInfo.email }}</span>
            </label>
          </a-col>
          <a-col :span="4"></a-col>
        </a-row>
      </div>
      <div class="user-category">
        <a-card title="文章分类" :bordered="false">
          <a-card-grid style="text-align:center;cursor: pointer;padding: 10px;" @click="cardClickHandler(item.id)"
                       v-for="item in homeData.categoryList">
            <div>{{ item.categoryName }}</div>
            <div>({{ item.articleNum }})</div>
          </a-card-grid>
        </a-card>
      </div>
    </a-layout-sider>
    <a-layout-sider style="width: 60%;min-width: 60%; background: #f0f2f5">
      <div class="search">
        <a-row>
          <a-col :span="1"></a-col>
          <a-col :span="18" size="large">
            <a-input placeholder="请输入内容搜索..." v-model="params.keyword" @change="keywordChangeHandler"
                     style="width: 100%;height: 45px;"/>
          </a-col>
          <a-col :span="1"></a-col>
        </a-row>
      </div>
      <div class="article-list">
        <a-spin :spinning="loading" tip="加载中...">
          <a-row v-for="item in homeData.articlePage.data">
            <a-col :span="1"></a-col>
            <a-col :span="18">
              <router-link :to="'/article/detail/' + item.id" target="_blank">
                <a-card :title="item.title">
                  <div slot="extra">
                    <label style="margin-right: 20px;">
                      <span class="field"><a-icon type="calendar"/></span>
                      <span class="value">{{ item.lastUpdateDate }}</span>
                    </label>
                    <label>
                      <span class="field"><a-icon type="eye"/></span>
                      <span class="value">{{ item.browseNum }}</span>
                    </label>
                  </div>
                  {{ item.content }}
                </a-card>
              </router-link>
            </a-col>
            <a-col :span="1"></a-col>
          </a-row>
          <a-row v-if="homeData.articlePage.totalRow > 0">
            <a-pagination show-quick-jumper :defaultPageSize="homeData.articlePage.pageSize" @change="pageChangeHandler"
                          :total="homeData.articlePage.totalRow"/>
          </a-row>
        </a-spin>
      </div>
    </a-layout-sider>
    <!--    <div>-->
    <!--      <a-back-top/>-->
    <!--    </div>-->
  </a-layout>
</template>

<script>
import {getHomeData, queryForPage} from "@/network/home";
import {PageQuery} from "@/utils/page-query";

export default {
  name: "HomeIndex",
  data() {
    return {
      username: null,
      loading: false,
      params: {
        categoryId: null,
        keyword: null
      },
      homeData: {
        userInfo: {},
        categoryList: [],
        articlePage: {
          totalRow: 0,
          pageSize: 5
        }
      }
    }
  },
  created() {
    let username = this.$route.params.username;
    if (username) {
      this.username = username;
      getHomeData(username).then(response => this.homeData = response.data)
    }
  },
  methods: {
    cardClickHandler(value) {
      this.loading = true;
      this.params.categoryId = value;
      queryForPage(new PageQuery({account: this.username, categoryId: value}))
        .then(response => this.homeData.articlePage = response.data)
        .finally(() => this.loading = false);
    },
    keywordChangeHandler() {
      if (this.params.keyword) {
        this.pageChangeHandler(0, 5);
      }
    },
    pageChangeHandler(page, pageSize) {
      this.loading = true;
      queryForPage(new PageQuery({
        account: this.username,
        keyword: this.params.keyword,
        categoryId: this.params.categoryId
      }, page, pageSize))
        .then(response => this.homeData.articlePage = response.data)
        .finally(() => this.loading = false);
    }
  }
}
</script>

<style scoped>

.user-info {
  background: white;
  padding: 20px 0;
  margin-top: 10%;
}

.user-info .ant-row {
  margin-top: 5%;
}

.user-category {
  margin-top: 20%;
}

.search {
  margin-top: 5%;
}

.article-list {
  margin-top: 5%;
}

.article-list .ant-row {
  margin-top: 20px;
}

.field {
  font-weight: bolder;
}

.value {
  margin-left: 5px;
}
</style>
